<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>发送号码：</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.smsMobile"></el-input></p>
              <p>
                <label>短信状态：</label>
                <el-select v-model="pageData.value" placeholder="请选择">
                  <el-option value="">请选择</el-option>
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
              </p>
              <p>
                <label>是否为短信：</label>
                <el-select v-model="pageData.verify" placeholder="请选择">
                  <el-option value="">请选择</el-option>
                   <el-option
                     v-for="item in isisVerify"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
              </p>

              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs(1)">发送一条短信</el-button>
         <el-button type="primary" @click="dialogs(2)">批量发送短信</el-button>
      </div>
      <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                      class="del"
                    @click="handleEdit(scope.row)">删除
                  </el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="发送短信" :dialog="dialog" @close="changeData" :state="false">
          <slot>
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="短信模板：" prop="templateId">
                        <el-select v-model="ruleForm.templateId" placeholder="请选择类型" class="set"  @change="getValue">
                           <el-option
                            v-for="(item,idx) in tepData"
                            :key="idx"
                            :label="item.templateName"
                            :value="item.templateId"
                           ></el-option>
                       </el-select>
                    </el-form-item>

                          <!-- <el-input v-model="ruleForm.content" placeholder="请输入模板内容"></el-input> -->
                        <el-form-item
                                v-for="(domain,index ) in ruleForm.domains"
                                :label="'参数'"
                                :key="index"
                                :prop="'domains.'+index+'.value'"
                                :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }"
                                >
                                <el-input placeholder="请输入内容" v-model="domain.value"></el-input>
                        </el-form-item>

                      <el-form-item label="发送号码：" prop="mobile" v-if="type==1">
                          <el-input v-model="ruleForm.mobile" placeholder="请输入发送号码"></el-input>
                      </el-form-item>
                      <el-form-item label="电话号码(多个)："  v-if="type==2" prop="param">
                            <el-input v-model="ruleForm.param" placeholder="请输入电话号码，并以‘,’隔开" type='textarea'></el-input>
                      </el-form-item>
                      <el-form-item label="备注：" prop="remark">
                          <el-input v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
                      </el-form-item>
                      <el-form-item class="confirm">
                         <el-button type="primary" @click="submitForm('ruleForm')">发送</el-button>
                     </el-form-item>
                  </el-form>
          </slot>
      </dialogVue>
  
    </div>
</template>

<script>
  import Data from './sendNoteData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    noteList,
    templateList,
    sendMessage,
    sendMessages
  } from "@/api/note/note";
  import {
    delnote,
  } from "@/api/note/delNote";

  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       var data = {};
       this.getMsgList(data);
        templateList().then(res=>{
                if(res.data.code=="OK"){
                    this.tepData = res.data.data.records;
                }
        })
     },
     methods : {
       handSize (val) {//翻页
         this.pageData.loading = true;
         var data = {
           size : '10',
           current : val,
           smsMobile : this.pageData.smsMobile,
           smsContent : this.pageData.smsContent,
           smsStatus : this.pageData.value,
           isVerify  : this.pageData.verify,
         }
         noteList(data).then(res=>{
           if (res.data.code == 'OK') {
             setTimeout(()=>{
                this.pageData.loading = false;
             },800)
             this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
                item.smsStatus  = item.smsStatus == 'S' ?'成功':'失败';
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                item.sendTime = this.switchTime(item.sendTime)
                return item;
             });
             this.total = res.data.data.total;
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       getMsgList (data) {//列表
         this.pageData.loading = true;
         data['size'] = '10'
         data['current'] = '1'
         noteList(data).then(res=>{
           if (res.data.code == 'OK') {
             this.pageData.loading = false;
             this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
                item.smsStatus  = item.smsStatus == 'S' ?'成功':'失败';
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                item.sendTime = this.switchTime(item.sendTime)
                return item;
             });
           } else {
             this.pageData.loading = false;
             this.$message.error(res.data.message);
           }
         })
       },
       search () {//搜索
          var data = {
            smsMobile : this.pageData.smsMobile,
            smsContent : this.pageData.smsContent,
            smsStatus : this.pageData.value,
            isVerify  : this.pageData.verify,
          }
          this.getMsgList(data)
       },
       dialogs(type) {
            this.type=type;
            this.dialog = true;
            this.$refs['ruleForm']&& this.$refs['ruleForm'].resetFields();
       },
       multi_up () { //批量发送
        this.multi = true;
       },
       changeData (val) {
         this.dialog = val
       },
       handleEdit(item){
         this.delMessage(()=>{
           var id = [];
           id.push(item.smsTelId)
           delnote(id).then(res=>{
             if (res.data.code == 'OK'){
               var data = {
                 smsMobile : this.pageData.smsMobile,
                 smsContent : this.pageData.smsContent,
                 smsStatus : this.pageData.value,
                 isVerify  : this.pageData.verify,
               }
                this.getMsgList(data)
                this.$message.success("删除成功");
             } else {
                this.$message.error(res.data.message);
             }
           })
         })
         // console.log(item.id)
       },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let data = {
                templateId : this.ruleForm.templateId,
                param:[],
                mobile : this.ruleForm.mobile,
                remark : this.ruleForm.remark
              }
              for(let i =0,len = this.ruleForm.domains.length;i<len;i++){
                  data.param.push(Base64.encode(this.ruleForm.domains[i].value))
              }
              data.param =data.param.join(',')
              if(this.type==1){
                    sendMessage(data).then(res=>{
                        if(res.data.code == "OK"){
                            this.$message.success('发送成功！');
                            this.dialog = false;
                                this.getMsgList({});
                        }else{
                            this.$message.error(res.data.message)
                        }
                    })
              }else{
                  data.mobile = this.ruleForm.param
                 sendMessages(data).then(res=>{
                        if(res.data.code == "OK"){
                            this.$message.success('发送成功！');
                            this.dialog = false;
                            this.getMsgList({});
                        }else{
                            this.$message.error(res.data.message)
                        }
                }) 
              }
             
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        handleClose(done) {
            this.multi = false;
        },
        getValue(value){
           for(let i =0,len=this.tepData.length;i<len;i++){
               if(this.tepData[i].templateId ==value){
                    for (let b =0;b<this.tepData[i].templateParamNum;b++){
                        this.ruleForm.domains.push({value:''})
                    }
                    this.ruleForm.domains.length = this.tepData[i].templateParamNum
                   break;
               }
           }

        }
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
  text-align: center;
}
.el-input {
  width:160px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.el-form-item__content {
  margin-left: 120px !important;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
/* .confirms {
  position: absolute;
  bottom: -1px;
  right: 100px;
} */
.dels {
  margin-left: 10px;
}
</style>
